<style lang="scss" scoped>
    $fontSize: 13px;

    .shopping-cart {
        padding-top: 46px;
        padding-bottom: 126px;

        .delete-transition {
            transition: max-height .3s ease;
            max-height: 200px;
        }

         .delete-leave {
            max-height: 0;
            opacity: 0;
        }

        .mshop-cart-item {
            background-color: #fbfbfb;
            border-bottom: 1px solid #eee;
            box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);
        }

        @mixin center {
            display: flex;
            align-items: center;
        }

        .mshop-cart-footer {
            height: 46px;
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 55px;
            z-index: 1;
            background-color: white;
            justify-content: space-between;

            @include center;

            .left {
                @include center;

                .choose {
                    padding: 12px;
                    $circle-rect: 20px;

                    .circle {
                        width: $circle-rect;
                        height: $circle-rect;
                        background: url('../assets/circle.png') no-repeat;
                        background-size: $circle-rect;
                    }

                    .choosed {
                        background: url('../assets/circle-choosed.png') no-repeat;
                        background-size: $circle-rect;
                    }
                }
            }

            .right {
                @include center;

                .subtotal {
                    margin-right: 1em;
                }

                .order {
                    height: 46px;
                    font-size: 15px;
                    width: 6em;
                    border: 0;
                    color: #fff;
                    background-color: #f44336;
                }
            }
        }
    }

</style>

<template>
    <div class="shopping-cart">
        <div
         class="mshop-cart-item"
         v-for="cart in carts"
         v-if="!cart.delete"
         transition="delete" >
         <cart-item :cart.sync="cart" ></cart-item>
        </div>

        <div class="mshop-cart-footer">
            <div class="left">
                <div class="choose">
                    <div
                     class="circle"
                     :class="{choosed: all_choose}"
                     @click="do_all_choose" >
                    </div>

                </div>
                <label>全选</span>
            </div>

            <div class="right">
                <div class="subtotal">
                    <span>合计:</span>
                    <price :price="amount"></price>
                </div>

                <div class="button">
                    <button class="order" @click.prevent.stop="do_order">{{ submit_button }}</button>
                </div>
            </div>
        </div>

        <tabbar></tabbar>
    </div>
</template>

<script>
    import cartService from 'services/cart'
    import orderService from 'services/order'
    import CartItem from 'util-components/cart-item.vue'
    import Tabbar from 'util-components/tabbar.vue'
    import Price from 'util-components/price.vue'

    import getters from '../vuex/getters'
    import ShopType from '../shop-type'

    const temp_carts = {
        carts: [
            { name: '守望先锋普通版XXXXXXXXXXXXXXXXXXXXXXX', id: 1, price_unit: '198', product_uom_qty: 2, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 3, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 6, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
            { name: '守望先锋普通版', id: 1, price_unit: '198', product_uom_qty: 1, choose: false, variant: '颜色:白色 大小:4.7', delete: false},
        ],
        all_choose: false
    }

    export default {
        events: {
            'do-choose': function () {
                this.all_choose = this.carts.every(cart => cart.choose);
            },
            'do-delete': function (cart_id) {
                cartService.delete(cart_id)
            },
            'change-qty': function (cart_id, qty) {
                cartService.updateQty(cart_id, qty);
            },
        },
        data: () => ({
            carts: [],
            all_choose: false,
            submit_button: '意向单',
        }),
        computed: {
            amount: ({carts}) => carts.reduce((sum, cart) =>
                sum + (cart.choose?
                   parseFloat(cart.price_unit) * parseInt(cart.product_uom_qty): 0), 0),
        },
        ready () {
            this.submit_button = ShopType.shoppingCart.get_submit_button(this.shop_type);
        },
        vuex: {
            getters
        },
        components: {
            CartItem,
            Tabbar,
            Price
        },
        route: {
            data: ({to}) => {
                return cartService
                    .fetch(to.params.product || to.query.product)
                    .then(({data}) => ({carts: data, all_choose: false}), () => temp_carts)
            }
        },
        methods: {
            do_all_choose () {
                this.all_choose = !this.all_choose;

                for (const cart of this.carts) {
                    cart.choose = this.all_choose;
                }

                this.$broadcast('do_all_choose');
            },
            do_order () {
                const cart_ids = this.carts
                                    .filter((cart) => cart.choose && !cart.delete)
                                    .map((cart) => cart.id);

                if (cart_ids.length > 0) {
                    orderService.canPay(this.amount, this.shop_type.type).then(() => {
                        this.$route.router.go({
                            path: 'order/edit',
                            query: {orders: JSON.stringify(cart_ids)},
                            append: true
                        })
                    })
                }
            },
        }
    }

</script>
